<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>OA管理系统</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style type="text/css">
        @media screen and (max-width: 767px) {
            .layui-side-scroll,.layui-layout-admin .layui-side,.layui-nav-tree {
                width: 5rem!important;
            }
            .layui-nav-tree .layui-nav-item a{
                overflow: visible!important;
            }
            .layui-nav *{
                font-size: 0.6rem;
                padding-left: 3px!important;
            }
            .layui-nav-tree .layui-nav-item {
                width: 5rem;
            }
            .layui-layout-admin .layui-footer {
                left: 5rem;
                font-size: 0.6rem;
                padding-left: 5px;
                height: 20px;
                line-height: 20px;
            }
            .layui-hide-xs {
                display: flex !important;
                width: 5rem!important;
                font-size: 0.65rem!important;
                justify-content: center;
            }
            .layui-nav-img {
                width: 0.9rem!important;
                height: 0.9rem!important;
                margin-right: 1px !important;
            }
            .layui-hide{
                display: flex !important;
            }
            .layui-layout-right{
                right: 5px;
                padding: 1px !important;
                display: flex !important;
            }
            .layui-body{
                left: 5rem;
                padding-bottom: 20px!important;
            }
            .layui-layer{
                width: 6rem!important;
            }
            .layui-nav-child{
                min-width: 30px!important;
                line-height: 18px;
            }
            .layui-layout-left{
                visibility: visible!important;
                padding: 0!important;
                left: 5rem!important;
            }
            .layui-layout-left  .layui-show-xs-inline-block a,.layui-layout-left li{
                padding: 0px!important;
            }

        }
    </style>
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">OA管理系统</div>
        <ul class="layui-nav layui-layout-left" style="visibility: hidden">
            <!-- web、移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block " lay-header-event="menuLeft2">
                <a href="javascript:;"> <i id="leftEnumIcon" class="layui-icon layui-icon-spread-left"></i></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:">
                    <img src="/img/head1.jpg" class="layui-nav-img">
                    <span th:text="欢迎您+'，'+${realName}+'（' +${positionName}+'）'"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/logout">登出</a></dd>
                    <dd><a href="javascript:" onclick=changepath("/revise")>个人面板</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  th:each="menu,userStat:${menus}" lay-filter="demo">
                <li class="layui-nav-item" >
                    <a href="javascript:" th:text="${menu.menuName}"></a>
                    <dl class="layui-nav-child">
                        <dd th:each="child:${menu.secondMenus}" >
                            <a th:data="${child.menuUrl}" th:onclick="changepath([[${child.menuUrl}]])"
                               th:text="${child.menuName}"></a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
      <iframe frameBorder="0" width="100%" height="100%" src=""></iframe>
    </div>

    <div class="layui-footer">
        Copyright © 2023   易诚金软
    </div>
</div>
<script src="./layui/layui.js"></script>
<script>
    function changepath(path){
    layui.$('iframe').attr('src',path);
    layui.$("dd").not(this).removeClass('layui-this')
}
</script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });
        //头部事件
        util.event('lay-header-event', {  //util 记得 声明 var util = layui.util
            //左侧菜单事件
            menuLeft2: function (othis) {
                var btn = $("#leftEnumIcon");
                if (btn.hasClass('layui-icon-spread-left')) {
                    menuHide(btn);
                    btn.addClass('btn-index');
                } else if (btn.has('layui-icon-shrink-right')) {
                    btn.removeClass('btn-index');
                    menuShow(btn);

                }
                $(window).resize(function () {
                    var width = $(document.body).width();
                    var btn = $("leftEnumIcon");
                    if (width < 1000) {
                        if (btn.hasClass('layui-icon-spread-left')) {
                            menuShow(btn);
                        }
                    } else {
                        if (!btn.hasClass('btn-index')) {
                            if (btn.hasClass('layui-icon-shrink-right')) {
                                menuHide(btn);

                            }
                        }
                    }

                });
                function menuShow(btn) {
                    btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                    $(".layui-side").animate({width: 'toggle'});
                    $(".zq-logo").animate({width: 'toggle'});
                    $(".layui-body").animate({left: '5rem'});
                    $(".layui-footer").animate({left: '5rem'});
                }
                function menuHide(btn) {
                    btn.removeClass(' layui-icon-spread-left').addClass('layui-icon-shrink-right');
                    $(".layui-side").animate({width: 'toggle'}); //toggle如果原来div是隐藏的就会把元素显示，如果原来是显示则隐藏
                    $(".zq-logo").animate({width: 'toggle'});
                    $(".layui-body").animate({left: '0px'});
                    $(".layui-footer").animate({left: '0px'});
                }
            }
        });
    });


</script>
</body>
</html>